<template>
  <div>
    <header class="heading affix dock-top dock-auto">
      <div class="avatar" @click="jumpToBack"><i class="icon-chevron-left"></i></div>
      <div class="title" v-show="!flag">
        <strong v-if="tab">{{ tab }}</strong>
        <strong v-else>Ebook</strong>
      </div>
      <transition name="fade" mode="out-in">
        <div class="title" v-show="flag">
          <div class="slidediv">
            <input name="search" id="search" class="input" v-model="keyword" ref="keyword" rel="popover"
              @click="jumpToSearch" />
            <a><i class="icon-search avatar" @click="reTheme"></i></a>
          </div>
        </div>
      </transition>
      <transition name="slide-right" mode="out-in">
        <nav class="nav" v-show="!flag">
          <a><i class="icon-search" @click="reTheme"></i></a>
          <a><i class="icon-home" @click="jumpToHome"></i></a>
          <a class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
            aria-controls="offcanvasExample"><i class="icon-bars" @click="toggleTitleAndMenu"></i></a>
        </nav>
      </transition>
    </header>
    <div class="offcanvas offcanvas-start width60" tabindex="-1" id="offcanvasExample"
      aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">我的主页</h5>
        <!-- <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> -->
      </div>
      <Menu></Menu>
    </div>
  </div>
</template>

<script>
import Menu from './Menu.vue'

export default {
  data() {
    return {
      flag: false,
      keyword: '',
      ifTitleAndMenuShow: false,
      tab: this.$route.query.tab
    }
  },

  mounted() { },

  components: { Menu },

  methods: {
    reTheme() {
      this.flag = !this.flag
    },
    jumpToSearch() {
      this.$router.push({ path: '/search' })
    },
    jumpToHome() {
      this.$router.push({ path: '/home' })
    },
    toggleTitleAndMenu() {
      this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
    },
    jumpToBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang='scss' scoped>
.whiteTop {
  opacity: 0.5;
}

.slidediv {
  display: flex;
  min-width: 1.5rem !important;
}

.width60 {
  width: 60%;
}

.heading.affix>.title {
  padding: 0.5rem 0.5rem;
}
</style>
